<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div>
      <div class="click-box">
        <button class="btn1">点击一</button>
        <button class="btn1">点击二</button>
        <button class="btn1">点击三</button>
      </div>
      <h1>let与块级作用域;</h1>
      <p>
        1.作用域--某个成员能够起作用的范围 在此之前,
        ES中只有两种作用域(全局作用域，函数作用域) ,在es2015中新增加了块级作用域
      </p>
      <p>2.在以前快没有独立的作用域,因此外界能访问代码块中的变量</p>
      <p>3.var存在变量声明，let声明不存在变量声明</p>
    </div>
    <script>
      // ES2015之前没有块级作用域,因此在代码块中的变量被外界访问到了
      if (true) {
        var foo = "xjq";
      }
      console.log(foo); //xjq
      //ES2015 中的let是有块级作用域的，外界是访问不到作用域中的代码的
      if (true) {
        let name = "John";
      }
      console.log(name);

      //   例子

      //全局作用域i
      for (var i = 0; i < 3; i++) {
        for (var i = 0; i < 3; i++) {
          //这里只打印了3次的原因是因为内层覆盖了外层
          console.log(i); //0 1 2
        }
        console.log("内层结束", i); //3
      }
      console.log(i); //4

      //块级作用域y
      for (let y = 0; y < 3; y++) {
        for (let y = 0; y < 3; y++) {
          console.log(y);
        }
        console.log("内层结束", y);
      }
      //  0
      //  1
      //  2
      // 内层结束 0
      //  0
      //  1
      //  2
      // 内层结束 1
      //  0
      //  1
      //  2
      // 内层结束 2

      //用var声明时，每次打印的数都相同，用let声明时点击那个打印那个
      var btn = document.querySelectorAll("button");
      for (var idx = 0; idx < btn.length; idx++) {
        btn[idx].onclick = function () {
          console.log(idx); //每次点击都是3因为idx是全局变量,因为原来的i销毁了，被重新赋值了
        };
      }
      //for循环的两重作用域
      for (let ii = 0; ii < 3; ii++) {
        let ii = "foo";
        console.log(ii); //3次foo
      }

      //var存在变量声明
      console.log(t1); //undefined  变量声明，但没有赋值
      var t1 = "xjq";
      //let不存在变量声明
      console.log(t2); //报错  因为let 不存在变量声明
      let t2 = "xjq";
    </script>
  </body>
</html>
